<template>
  <div id="pager">
    
    <header>
        <theme-selector @themeChange='themeChange'></theme-selector>
        <div class='operation'>
          <div class='operation-btn' @click="save">Save</div>
          <div class='operation-btn' @click="cancel">Cancel</div>
        </div>
    </header>
    <main>
      <div class='editor-attr'>
        <div class='row'>
          <div class='title'>Snippet name:</div>
          <div class='input'>
            <input v-model="snippet.name"/>
          </div>
        </div>
        <div class='row'>
          <div class='title'>Code type:</div>
          <div class='input'>
            <select v-model="snippet.type" @change="typeChange">
              <template v-for="(language, index) in getLans()">
                <option :key="index" :value="language.value">{{language.label}}</option>
              </template>
            </select>
          </div>
        </div>
        <div class='row'>
          <div class='title'>Description:</div>
          <div class='input'>
            <input v-model="snippet.description"/>
          </div>
        </div>
      </div>
      <div class='editor-container' id='editorArea'>
        <codemirror ref="myCm"
          :value="code" 
          :options="cmOptions"
          @ready="onCmReady"
          @focus="onCmFocus"
          @input="onCmCodeChange">
        </codemirror>
      </div>
    </main>
  </div>
</template>
<script>
  import ThemeSelector from './Theme'
  import LanguageSupport from './mixins/Language'
  import Stable from './mixins/Stable'
  export default {
    name: 'editor-page',
    mixins: [LanguageSupport, Stable],
    components: { ThemeSelector },
    data () {
      return {
        code: '',
        cmOptions: {
          tabSize: 4,
          mode: 'text/javascript',
          theme: 'base16-dark',
          lineNumbers: true,
          line: true,
          height: '100%'
        },
        snippet: {
          name: '',
          description: '',
          code: '',
          date: 0,
          type: null
        },
        snippetId: null

      }
    },
    methods: {
      onCmReady () {
        this.codemirror.setOption('theme', this.cmOptions.theme)
        this.codemirror.refresh()
      },
      themeChange () {
        this.refreshTheme()
        this.onCmReady()
      },
      onCmFocus () {},
      onCmCodeChange () {},
      typeChange () {
        this.codemirror.setOption('mode', this.snippet.type)
        this.codemirror.refresh()
      },
      goToEditor () {
        this.$router.push('/')
      },
      save () {
        let _this = this
        _this.snippet.code = this.codemirror.getValue()
        // simple form check.
        if (!_this.snippet.name) {
          alert('The snippet name can not be empty!')
          return
        } else if (_this.snippet.name.length > 120) {
          alert('The snippet name is too long!')
          return
        }
        if (!_this.snippet.code) {
          alert('The snippet code can not be empty!')
          return
        }
        if (!_this.snippet.type) {
          alert('Must select a language type!')
          return
        }

        if (_this.snippet.description && _this.snippet.description.length > 500) {
          alert('the description is too long!')
          return
        }

        _this.snippet.date = (new Date()).getTime()
        if (_this.snippetId) {
          _this.$easySnippetsDB.snippets.update(_this.snippetId, Object.assign({}, _this.snippet, {id: _this.snippetId}))
        } else {
          _this.$easySnippetsDB.snippets.add(this.snippet)
        }
        this.update(_this.snippet.type)
        this.goToEditor()
      },
      cancel () {
        this.goToEditor()
      },
      onChange (value) {
        this.code = value
      },
      refreshTheme () {
        const currentTheme = Number(window.localStorage.getItem('CURRENT_THEME'))
        if (currentTheme === 0) {
          this.cmOptions.theme = 'base16-dark'
        } else {
          this.cmOptions.theme = 'base16-light'
        }
      }
    },
    mounted () {
      let _this = this
      let id = this.$route.params.id
      if (id) {
        _this.$easySnippetsDB.snippets.get({id: Number(id)}).then(record => {
          _this.snippetId = record.id
          _this.snippet.name = record.name
          _this.snippet.code = record.code
          _this.snippet.type = record.type
          _this.snippet.description = record.description
          _this.codemirror.setValue(_this.snippet.code)
          _this.code = _this.snippet.code
          _this.typeChange()
        })
      }
    },
    created () {
      this.refreshTheme()
    },
    computed: {
      // computed for codemirror reference
      codemirror () {
        return this.$refs.myCm.codemirror
      }
    }
  }
</script>
<style>
.editor-attr {
  width: 100%;
  height: 140px;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px 0px;
  box-sizing: border-box;
}

.editor-attr .row {
  width: 100%;
  height: 40px;
  justify-content: start;
  align-content: center;
  flex-direction: row;
  justify-content: start;
  align-items: center;
}

.editor-attr .row .input {
  float: left;
  width: calc(100% - 200px);
  line-height: 38px;
}
.editor-attr .row .title {
  width: 200px;
  height: 100%;
  float: left;
  line-height: 40px;
}

.editor-container {
  flex: 1;
  width: 100%;
  height: calc(100% - 120px);
  overflow-y: auto;
  padding-bottom: 10px;
  box-sizing: border-box;
}

.vue-codemirror {
  height: auto;
  min-height: 300px !important;
}
.CodeMirror {
    height: 100% !important;
    font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji !important;
}

.CodeMirror-scroll {
  height: auto !important;;
  overflow-y: hidden !important;;
  overflow-x: auto !important;;
}
</style>
